<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <style>
      .title {
        background-color: red;
        color: green;
      }
      .myClass{
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // class ClassComp extends React.Component {
      //   constructor(props) {
      //     super(props);
      //     console.log('constructor');
      //     this.state = { count: 1 };
      //   }
      //   componentWillMount() {
      //     console.log('componentWillMount');
      //   }
      //   componentDidMount() {
      //     console.log('componentDidMount');
      //   }
      //   componentWillUnmount() {
      //     console.log('componentWillUnmount');
      //   }
      //   shouldComponentUpdate(e, a, b) {
      //     console.log('shouldComponentUpdate', e, a, b);
      //     return true;
      //   }
      //   componentWillUpdate(e, a, b) {
      //     console.log('componentWillUpdate', e, a, b);
      //   }
      //   componentDidUpdate(a, b, c, d) {
      //     console.log('componentDidUpdate', a, b, c, d);
      //   }
      //   render() {
      //     console.log('render');
      //     return (
      //       <div>
      //         {this.state.count}
      //         <button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
      //         <button onClick={this.unmount}>卸载组件</button>
      //         <button onClick={() => this.forceUpdate()}>强制更新</button>
      //       </div>
      //     );
      //   }
      //   unmount = () => {
      //     console.log(this);
      //     ReactDOM.unmountComponentAtNode(document.getElementById('example'));
      //   };
      // }

      // class A extends React.Component {
      //   state = { name: '周杰伦' };
      //   render() {
      //     return (
      //       <div>
      //         <h1>A组件</h1>
      //         <button onClick={() => this.setState({ name: this.state.name + 1 })}>改信息</button>
      //         <B name={this.state.name} time='zzz'></B>
      //       </div>
      //     );
      //   }
      // }
      class B extends React.Component {
        render() {
          console.log('render');
          return (
            <ul className='myClass'>
              {this.state.person.map((item, index) => {
                return (
                  <li key={index}>
                    <span>姓名：</span>
                    {item.name}--------年龄：{item.age}
                  </li>
                );
              })}
            </ul>
          );
        }
        state = {
          person: [
            { name: 'xiaoming', age: 21 },
            { name: 'xiaoliu', age: 24 },
            { name: 'zjl', age: 22 },
            { name: 'pwb', age: 26 },
            { name: 'xka', age: 19 },
            { name: 'bakaai', age: 16 },
          ],
        };
      }
      ReactDOM.render(<B name='asdas' />, document.getElementById('example'));
    </script>
  </body>
</html>
